<template>
  <ul class="infinite-list"  style="overflow:auto">
    <li v-for="item in this.note" v-on:click="getnote($event,item.noteId,item)" class="infinite-list-item">
      <div class="content">
        <h5 id="title" v-model="noteinfo.title">{{item.noteTitle}}</h5>
        <ul class="tool-bar">
          <li :class="{'iconfont icon-xing':!item.star,'iconfont icon-xing stared':item.star}" @click="addstar(item)"></li>
          <li class="iconfontnew icon-fenxiang"></li>
          <li class="iconfont icon-huishouzhan" @click="notedelete(item.noteId)"></li>
        </ul>
        <p class="above">{{item.content}}</p>
        <span id="date" v-model="noteinfo.date">{{item.createTime}}</span>
      </div>
    </li>
  </ul>
</template>

<script>
  import bus from '../../../assets/bus'
    export default {
        name: "newest",
      data(){
          return{
              editor: {
                  info: "",
              },
              note:[],
              noteinfo:{
                title:"",
                detail:"",
                date:"",
                  noteId:Number
              },
          }
      },
        methods:{
          getnote(e,noteId,item){
              var _this=this;
              var noteinfo=_this.noteinfo;
              _this.$axios.get('/note/query',{
                  params:{noteId:noteId}
              }).then(function (res,e) {
                  _this.noteinfo.detail=res.data.data.data;//将笔记内容放入noteinfo
                  _this.noteinfo.title=item.noteTitle;//获取标题dom中的内容
                  _this.noteinfo.date=item.createTime;//获取日期dom中的内容
                  _this.noteinfo.noteId=item.noteId;
                  _this.$emit("getnote",noteinfo)//将noteinfo传至cloudnote
              }).catch(function (err) {
                  console.log(err);
              })
                // 获取梗概dom中的内容
               // noteinfo.detail=e.currentTarget.firstElementChild.lastElementChild.previousElementSibling.textContent;
              //这里进行了一次dom排他操作，但是当数据量过大时并不适用
             var list=e.currentTarget.parentElement.children//获取列表元素放入一个集合
              for(var i=0;i<list.length;i++){
                  list[i].style.background="#FFFFFF";//遍历每个元素将其背景元素设为白色
              }
              e.currentTarget.style.background="#eaf0fb";//将目前选中的元素背景设为选中色
          },
            addstar(item){
              var _this=this;
                if (item.star==0){//若未加星，则让其加星
                    _this.$axios.post('/star/addStar',{
                        starNote:item.noteId
                    }).then(function (res) {
                        console.log(res);
                        _this.getnotelist()
                        if(res.data.code==200){
                            item.star=1;
                        }
                    }).catch(function (err) {
                        console.log(err);
                    })}else if(item.star==1){//若已加星，则取消其加星
                    _this.$axios.delete('star/cancelStar',{
                        data:{
                            starId:item.starId
                        }
                    }).then(function (res) {
                        if(res.data.code==200){
                            item.star=0;
                        }
                        console.log(res);
                    }).catch(function (err) {
                        console.log(err);
                    })

                }
            },
            getnotelist(){
              var _this=this;
                this.$axios.get('/note/queryNewest',{
                }).then(function (res) {
                    var list=res.data.data.data;
                        for(var i=0;i<list.length;i++){
                            if(list[i]==null){
                                list.splice(i,1);
                                i--;
                            }else{
                                list[i].createTime = _this.timestampToTime(list[i].createTime);//时间戳转换
                                list[i].content=_this.removeTag(list[i].content);//去除html
                            }
                        }
                    _this.note=list;
                        console.log(list);
                    }
                ).catch(function (err) {
                    console.log(err);
                });
            },
           timestampToTime(timestamp) {
             var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
              var Y = date.getFullYear() + '-';
              var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
             var D = (date.getDate()<10?'0'+(date.getDate()):date.getDate());
            return Y + M + D;
  },
            notedelete(noteId){
                     var _this=this;
                     this.$axios.delete('/note/delete',{
                         data:{
                             noteId:noteId
                         }
                     }).then(function (res) {
                         console.log(res);
                        if (res.data.code==200){
                            _this.getnotelist();
                        }
                     }).catch(function (err) {
                         console.log(err);
                     })
            },
            removeTag(str,len){
                return str.replace(/<\/?.+?>/g,"");
            }
        },
        mounted() {
            var _this=this;
            //接收从wangeditor组件传输来的组件
            // bus.$on('getinfo',(e)=>{
            //     this.editor.info=e;
            // });
            this.getnotelist();
        }
    }
</script>

<style scoped>
  .infinite-list{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: block;
  }
  .infinite-list-item{
    display: inline-block;
    height: 125px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .infinite-list-item h5{
    float: left;
    display: inline-block;
    width: 60%;
    font-size: 15px;
    height: 23px;
    text-align: left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis !important;
  }
  /*深度选择器*/
  .infinite-list-item p{
    overflow:hidden;
    /*超出范围用省略号表示*/
    text-overflow:ellipsis !important;
    font-size: 14px;
    line-height: 25px;
    width: 100%;
    height: 50px;
    text-align: left;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*显示行数为2*/
    -webkit-line-clamp:2;
    /*自动换行*/
    word-wrap: break-word;
    word-break: break-all;
  }
  .infinite-list-item .content #date{
    height: 15px;
    float: left;
    width: 50%;
    margin-top: 15px;
    display: inline-block;
    color: rgb(194,194,194);
    text-align: left;
  }
  .infinite-list-item .content{
    height: 100%;
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
  }
  .infinite-list li :hover{
    background: #eaf0fb !important;
  }

  .infinite-list li :hover .tool-bar{
    display: inline-block;
    cursor: pointer;
  }
  .tool-bar{
    /*width: 50px;*/
    /*height: 15px;*/
    /*display: none;*/
    float: right;
    display: none;
  }
  .tool-bar li{
    float: left;
    margin-right: 10px;
    font-size: 20px;
    position: relative;
  }
  .stared{
    color: #ffcb33;
  }
</style>
